
<style type="text/css">
	.blog_list_default .blog_content ul {
	    display: grid;
	    grid-row-gap: 40px;
	    grid-column-gap: 30px;
	    grid-template-columns: repeat(3, 1fr);
	}
	.blog_list_default .blog_content li {
	    text-align: center;
	    list-style-type: none;
	    overflow: hidden;
	}
	.blog_list_default .blog_content li .blog_pic {
	   width: 100%;
	   display: inline-block;
	   margin-bottom: 30px;
	}
	.blog_list_default .blog_content li .blog_pic img {
	    width: 100%;
	}

	.blog_list_default .blog_content li .blog_title {
	    display: block;
	    font-weight: bold;
	    margin-bottom: 10px;
	    color: var(--title_color);
	    font-size: var(--product_font_size);
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	}

	.blog_list_default .blog_content li .blog_time {
	    color: #999;
	    margin-top: 0.8rem;
	}

	.blog_list_default .blog_content li .blog_list_detail {
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 3;
	    overflow: hidden;
	    color: var(--detail_color);
	}

	.blog_list_default .blog_content li .blog_read_more {
	    display: inline-block;
	    margin-top: 10px;
	    text-decoration: underline;
	    color: #557FBF;
	}
	@media screen and (max-width: 767px) {
	    .blog_list_default .blog_content ul {
	        grid-template-columns: repeat(1, calc(100%)) !important;
	        grid-row-gap: 30px;
	    }
	   .blog_list_default .blog_content li .blog_pic {
		   margin-bottom: 20px;

		}
	}
	.blog_list_default .blog_list_time {
		margin-top: 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

</style>


<div class="blog_list_default container_wrapper" id="blog_list">
	<h1 class="title">{{ lang.blogs.list.news }}</h1>
    <div class="plugin-container-header"></div>

	<div class="blog_content">
 {% assign length = all_blog.blogs | size %}
    {% if length %}

		<ul>
			{% for article in all_blog.blogs %}
			<li>
				{% if section.settings.cover_picture %}
					{%- if article.image_alt == "" -%}
						{% assign article_alt = article | image_alt:'blog'   %}
					{%- else -%}
						{% assign article_alt = article.image_alt %}
					{%- endif -%}
					<a class="blog_pic" href="/blogs/{{article.handle}}"><img data-src="{{ article.src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{article_alt}}"></a>
				{% endif %}
				<a class="blog_title" href="/blogs/{{article.handle}}">{{article.title}}</a>
				{% if section.settings.blog_descript %}
					<div class="blog_list_detail">{{article.descript|html_content_filter}}</div>
				{% endif %}
				{% if section.settings.date or section.settings.author %}
					<div class="blog_list_time">
						{% if section.settings.date %}
						<span data-date="{{article.created_at}}" data-format="YYYY-mm-dd">{{ article.published_at | date: "%Y-%m-%d" }}</span>
						{% endif %}
						{% if section.settings.author %}{{ article.author_name }}{% endif %}
					</div>
				{% endif %}
			</li>
			{% endfor %}
		</ul>
	</div>
	{% include pagination , { paginate : paginate } %}
	{% else %}
  {% include empty ,text:lang.blogs.list.empty  %}
	{% endif %}
  <div class="plugin-container-footer"></div>

</div>

{% schema %}
{
	"tag": "section",
	"class": "blog_list",
	"is_global": false,
	"name": {
		"zh_CN": "博客列表",
		"en_US": "Blog list"
	},
	"max_blocks": 3,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input_number",
			"max": 80,
			"min": 8,
			"id": "pagesize",
			"label": {
				"zh_CN": "博客每页数量",
				"en_US": "Number of blogs per page"
			},
			"info": {
				"zh_CN": "默认数量12个;最小8个、最大80个;",
				"en_US": "Default number 12, minimum 8, maximum 80;"
			},
			"refresh": true,
			"default": 12
		},
		{
			"type": "card_switch",
			"id": "date",
			"label": {
				"zh_CN": "显示日期",
				"en_US": "Show date"
			},
			"default": false
		},
		{
			"type": "card_switch",
			"id": "author",
			"label": {
				"zh_CN": "显示作者",
				"en_US": "Show author"
			},
			"default": false
		},
		{
			"type": "card_switch",
			"id": "cover_picture",
			"label": {
				"zh_CN": "显示封面图片",
				"en_US": "Show cover image"
			},
			"default": true
		},
		{
			"type": "card_switch",
			"id": "blog_descript",
			"label": {
				"zh_CN": "显示简短描述",
				"en_US": "Show a short description"
			},
			"default": true
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"pagesize": 12,
			"date": false,
			"author": false,
			"cover_picture": true,
			"blog_descript": true,
			"refresh": true
		},
		"blocks": []
	}
}
{% endschema %}
